<template>
  <div class="details-box">
    <header class="app-header">
      <a href="javascript:;" @click="back">
        <i class="iconfont iconfanhui">返回</i>
      </a>
      <span>详情</span>
    </header>
    <div class="details-warp">
      <h2 class="details-title">{{ arr.title }}</h2>
      <i class="details-author-date">
        发布人：{{ arr.author }} 发布时间：{{ arr.date }}
      </i>
      <div class="details-content markdown-body" v-html="content"></div>
      <!-- 评论区 -->
      <div class="dianz">
        <div class="divs">
           <h2>评论</h2>
           <h5>点赞{{ totalTwo }}</h5>
        </div>
        <div>
          <counDown />
        </div>
      </div>
      <commentArea :item="id" />
    </div>
    <detailsFooter v-if="!status" :item="id" />
    <detailsComment :item="id" v-else />
  </div>
</template>

<script>
import marked from "marked";
import "github-markdown-css";
import commentArea from "../msbd/commentArea";
import detailsFooter from "../msbd/detailsFooter";
import detailsComment from "../msbd/detailsComment";
import counDown from "../msbd/counDown";
import { mapState, mapMutations, mapActions } from "vuex";
export default {
  props: ["id"],
  data() {
    return {
      item: {},
    };
  },
  async mounted() {
    await this.getItemApi(this.id);
  },
  methods: {
    ...mapMutations("msbd", ["SET_DETAILCOMMENT"]),
    ...mapActions("discuss", ["getItemApi"]),
    back() {
      this.$router.back();
      this.SET_DETAILCOMMENT(false);
    },
  },
  computed: {
    ...mapState("msbd", ["status"]),
    ...mapState("discuss", ["arr", "totalTwo"]),
    content() {
      return marked(this.arr.content || "");
    },
  },
  components: {
    detailsFooter,
    detailsComment,
    commentArea,
    counDown,
  },
};
</script>

<style scoped>
.details-warp {
  padding: 10px;
  flex-grow: 1;
  height: calc(100vh - 140px);
  overflow-y: auto;
}
.details-date {
  font-size: 12px;
  color: #999999;
  text-align: right;
  display: block;
  margin: 10px 0;
}

.details-box {
  height: 100%;
  display: flex;
  flex-direction: column;
  /* justify-content: space-between; */
}

.details-title {
  font-size: 20px;
  font-weight: normal;
}

.details-author-date {
  display: block;
  text-align: right;
  font-size: 12px;
  margin: 10px 0;
  color: #999;
}

.dianz {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}

.divs {
  display: flex;
  align-items: center;
}

.divs h5 {
  margin-left: 10px;
}
</style>